﻿<div ng-if="activeTab == 'anim'" ng-controller="AnimConsoleCtrl">
    <div class="anim_area">
        <div class="anim-panels" ng-if="animations.length">
            <section ng-repeat="animation in animations track by $index">
                <div class="style_list" ng-init="opea.show=true" ng-click="opea.show=!opea.show">
                    <b class="caret" ng-if="opea.show">
                    </b>
                    <b class="caret off" ng-if="!opea.show">
                    </b>
                    动画&nbsp;{{$index+1}}
                    <span style="padding-right: 10px;cursor:pointer;" class="fr" ng-click="removeAnim($index, $event)">
                        <img title="删除此动画" ng-src="{{CLIENT_RES_CDN + 'scene-editor/images/delete.png'}}">
                    </span>
                </div>
                <div ng-if="opea.show" class="style_list_angel clearfix">
                    <label>
                        方式
                    </label>
                    <div class="touming clearfix">
                        <select ng-model="types[$index]" ng-change="animation.type=types[$index].id; changeAnimation(animation, $index)"
                                ng-options="animType.name group by animType.cat for animType in animTypeEnum">
                            <option value="-1">
                                无
                            </option>
                        </select>
                    </div>
                </div>
                <div ng-if="opea.show && animation.type == 7" class="style_list_angel clearfix">
                    <label>
                        速度
                    </label>
                    <div class="clearfix touming">
                        <div class="num" style="text-align:right;margin-top:4px;">
                            <input type="checkbox" value="" ng-model="animation.linear" style="margin-right:2px;margin-top:0px;" />
                            匀速
                        </div>
                    </div>
                </div>
                <div ng-if="animation.type != -1 && animation.type != null && opea.show">
                    <form role="form">
                        <div class="style_list_angel clearfix" ng-show="animation.type == 1 || animation.type == 2">
                            <label>
                                方向
                            </label>
                            <div class="touming clearfix">
                                <select ng-model="directions[$index]" ng-change="animation.direction=directions[$index].id;changeAnimation(animation, $index)"
                                        ng-options="animDirection.name for animDirection in animDirectionEnum"></select>
                            </div>
                        </div>
                        <div class="style_list_angel">
                            <label>
                                时间
                            </label>
                            <div class="touming clearfix">
                                <p class="num">
                                    <input limit-input class="input_kuang short" type="number" step="0.1"
                                           min="0" max="20" ng-model="animation.duration" />
                                    秒
                                </p>
                                <div class="num" style="width:100px;" ui-slider min="0" max="20" use-decimals
                                     step="0.1" ng-model="animation.duration">
                                </div>
                            </div>
                        </div>
                        <div class="style_list_angel">
                            <label>
                                延迟
                            </label>
                            <div class="touming clearfix">
                                <p class="num">
                                    <input limit-input class="input_kuang short" type="number" step="0.1"
                                           min="0" max="20" class="form-control" ng-model="animation.delay" />
                                    秒
                                </p>
                                <div class="num" style="width:100px;" ui-slider min="0" max="20" use-decimals
                                     step="0.1" ng-model="animation.delay">
                                </div>
                            </div>
                        </div>
                        <div class="style_list_angel">
                            <label>
                                次数
                            </label>
                            <div class="touming clearfix">
                                <p class="num" style="float:left;margin-right:10px;">
                                    <input ng-disabled="animation.count" limit-input class="input_kuang short"
                                           type="number" min="1" max="10" class="form-control" ng-model="animation.countNum" />
                                    次
                                </p>
                                <div class="num" style="text-align:right;margin-top:0px;">
                                    <label>
                                        <input type="checkbox" value="" id="xunhuan" ng-model="animation.count"
                                               style="margin-right:2px;margin-top:0px;" />
                                        循环
                                    </label>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </section>
        </div>
        <div class="add-anim">
            <a ng-click="addAnim()" class="add-anims">
                添加动画
            </a>
            <a ng-click="previewAnim()" class="broad-anim">
                播放动画
            </a>
        </div>
    </div>
    <div class="modal-footer">
        <a class="btn-main" ng-click="cancel()">
            确定
        </a>
        <a class="btn-grey0" ng-click="clear()">
            清除动画
        </a>
    </div>
</div>